<script setup lang="ts">
    import {ComponentInternalInstance, defineEmits, defineProps, getCurrentInstance} from 'vue'
    const {appContext: {app: {config: {globalProperties}}}} = getCurrentInstance() as ComponentInternalInstance
    interface Props {
        modelValue: string
    }
    const props = defineProps<Props>()
    const emits = defineEmits(['update:modelValue'])
</script>

<template>
    <el-popover trigger="click" :width="256">
        <template #reference>
            <el-button style="width: 150px" :icon="modelValue">{{ modelValue }}</el-button>
        </template>
        <div class="el-icon-picker">
            <component v-for="icon in globalProperties.$icons" :key="icon"
                       :class="[icon, 'icon', { 'icon-active': icon == modelValue }]"
                       :is="icon"
                       @click="emits('update:modelValue', icon)">
            </component>
        </div>
    </el-popover>
</template>

<style scoped>
    .el-icon-picker {
        width: 150px;
        height: 256px;
        overflow-y: scroll;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        color: var(--el-text-color-regular);
        font-size: 20px;
        border-radius: 4px;
        cursor: pointer;
        text-align: center;
        line-height: 45px;
        margin: 5px;
    }

    .icon:hover {
        color: var(--el-color-primary);
    }

    .icon-active {
        color: var(--el-color-primary);
    }
</style>